<template>
  <div>
    <div class="group-title">
      <div class="text">旅行信息</div>
      <img
          src="https://intelaulinpro.oss-cn-beijing.aliyuncs.com/common/icon-edit.png"
          alt=""
          @click="handleEditIconClick(1)"
      >
    </div>
    <div class="user-info-box" style="margin-top: 40px;">
      <div class="left">
        <div class="block-title">抵达详情</div>
        <UserInfoItem
            itemKey="您将如何抵达*"
            :itemValue="travle.arrivalDetailsType"
        />
        <div v-show="travle.arrivalDetailsType === '飞机'">
          <UserInfoItem
              itemKey="抵达机场*"
              :itemValue="travle.airArrivalAirport"
          />
          <UserInfoItem
              itemKey="出发地*"
              :itemValue="travle.airArrivalOrigin"
          />
          <UserInfoItem
              itemKey="航线"
              :itemValue="travle.airArrivalAirline"
          />
          <UserInfoItem
              itemKey="航班*"
              :itemValue="travle.airArrivalFlightNumber"
          />
          <UserInfoItem
              itemKey="抵达日期*"
              :itemValue="travle.airArrivalDate"
          />
          <UserInfoItem
            itemKey="航班出发时间*"
            :itemValue="travle.airArrivalDepartureTime"
          />
          <UserInfoItem
              itemKey="抵达时间*"
              :itemValue="travle.airArrivalTime"
          />
          <UserInfoItem
              itemKey="抵达航站楼*"
              :itemValue="travle.airArrivalTerminal"
          />
          <UserInfoItem
              itemKey="备注"
              :itemValue="travle.airArrivalComments"
          />
        </div>
        <div v-show="travle.arrivalDetailsType === '火车'">
          <UserInfoItem
              itemKey="您将抵达哪个车站*"
              :itemValue="travle.railArrivalStation"
          />
          <UserInfoItem
              itemKey="出发地*"
              :itemValue="travle.railArrivalOrigin"
          />
          <UserInfoItem
              itemKey="抵达日期*"
              :itemValue="travle.railArrivalDate"
          />
          <UserInfoItem
              itemKey="抵达时间*"
              :itemValue="travle.railArrivalTime"
          />
          <UserInfoItem
              itemKey="列车车次*"
              :itemValue="travle.railArrivalTrainNumber"
          />
          <UserInfoItem
              itemKey="铁路公司"
              :itemValue="travle.railArrivalTrainCompany"
          />
          <UserInfoItem
              itemKey="备注"
              :itemValue="travle.railArrivalComments"
          />
        </div>
        <div v-show="travle.arrivalDetailsType === '汽车'">
          <UserInfoItem
              itemKey="抵达日期*"
              :itemValue="travle.carArrivalDate"
          />
          <UserInfoItem
              itemKey="抵达时间*"
              :itemValue="travle.carArrivalTime"
          />
          <UserInfoItem
              itemKey="备注"
              :itemValue="travle.carArrivalComments"
          />
        </div>
        <div v-show="travle.arrivalDetailsType === '其它'">
          <UserInfoItem
              itemKey="抵达日期*"
              :itemValue="travle.otherArrivalDate"
          />
          <UserInfoItem
              itemKey="抵达时间*"
              :itemValue="travle.otherArrivalTime"
          />
          <UserInfoItem
              itemKey="备注"
              :itemValue="travle.otherArrivalComments"
          />
        </div>
      </div>
      <div class="right">
        <div class="block-title">出发详情</div>
        <UserInfoItem
            itemKey="您将如何离京*"
            :itemValue="travle.departureDetailsType"
        />
        <div v-show="travle.departureDetailsType === '飞机'">
          <UserInfoItem
              itemKey="出发机场*"
              :itemValue="travle.airDepartureAirport"
          />
          <UserInfoItem
              itemKey="出发日期*"
              :itemValue="travle.airDepartureDate"
          />
          <UserInfoItem
              itemKey="出发时间*"
              :itemValue="travle.airDepartureTime"
          />
          <UserInfoItem
              itemKey="航线"
              :itemValue="travle.airDepartureAirline"
          />
          <UserInfoItem
              itemKey="航班*"
              :itemValue="travle.airDepartureFlightNumber"
          />
          <UserInfoItem
              itemKey="出发航站楼*"
              :itemValue="travle.airDepartureTerminal"
          />
          <UserInfoItem
              itemKey="备注"
              :itemValue="travle.airDepartureComments"
          />
        </div>
        <div v-show="travle.departureDetailsType === '火车'">
          <UserInfoItem
              itemKey="您将从哪个车站出发*"
              :itemValue="travle.railDepartureStation"
          />
          <UserInfoItem
              itemKey="出发日期*"
              :itemValue="travle.railDepartureDate"
          />
          <UserInfoItem
              itemKey="出发时间*"
              :itemValue="travle.railDepartureTime"
          />
          <UserInfoItem
              itemKey="列车车次*"
              :itemValue="travle.railDepartureTrainNumber"
          />
          <UserInfoItem
              itemKey="到达地点*"
              :itemValue="travle.railDeparturePlace"
          />
          <UserInfoItem
              itemKey="备注"
              :itemValue="travle.railDepartureComments"
          />
        </div>
        <div v-show="travle.departureDetailsType === '汽车'">
          <UserInfoItem
              itemKey="您预估的出发时间是*"
              :itemValue="travle.carDepartureTime"
          />
          <UserInfoItem
              itemKey="出发日期*"
              :itemValue="travle.carDepartureDate"
          />
          <UserInfoItem
              itemKey="备注"
              :itemValue="travle.carDepartureComments"
          />
        </div>
        <div v-show="travle.departureDetailsType === '其它'">
          <UserInfoItem
              itemKey="您预估的出发时间是*"
              :itemValue="travle.otherDepartureTime"
          />
          <UserInfoItem
              itemKey="出发日期*"
              :itemValue="travle.otherDepartureDate"
          />
          <UserInfoItem
              itemKey="备注"
              :itemValue="travle.otherDepartureComments"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Subtitle from "../components/common/Subtitle";
import UserInfoItem from "../components/UserInfoItem";
import {getTravel, getTravelAuto, getUserInfo} from "@/api/service";

export default {
  name: "faq",
  components: {UserInfoItem, Subtitle},
  data() {
    return {
      travle: {},
      guestFlag: 0
    }
  },
  mounted() {
    this.travle = JSON.parse(localStorage.travel)
    console.log(this.travle)
  },
  watch: {
    '$route': {
      handler: function (to, from) {
        this.uploadPage()
      },
      immediate:true
    }
  },
  created() {
    getTravelAuto()
  },
  methods: {
    uploadPage () {
      getTravel().then(res => {
        if (res.code === 200) {
          this.travle = res.data
        }
      })
    },
    handleEditIconClick(val) {
      console.log(val)
      if (val === 1) {
        this.$router.push({
          path: this.$i18n.path('travelInfoEdit')
        })
      }
      if (val === 2) {
        this.$router.push({
          path: this.$i18n.path('inviteeInfoEdit')
        })
      }
    }
  },

}
</script>

<style scoped>
.register-container {
  width: 800px;
  padding-bottom: 120px;
}

.group-title {
  height: 36px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: #333333;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #D7D7D7;
}
.group-title > img {
  cursor: pointer;
}

.user-base-item {
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  padding: 16px 20px 0 0;
  display: flex;
  flex-direction: column;
}

.user-base-item > .name {
  font-size: 16px;
  line-height: 22px;
  color: #333333;
}


.user-base-item > .phone-number {
  font-weight: 200;
  font-size: 16px;
  line-height: 22px;
  color: #666666;
}

.user-info-box {
  width: 100%;
  display: flex;
}

.user-info-box > .left {
  width: 50%;
  border-right: 1px solid #D7D7D7;
}

.user-info-box > .right {
  width: 50%;
  padding-left: 40px;
  box-sizing: border-box;
}

.block-title {
  font-size: 16px;
  color: #333333;
  margin-top: 0px;
}
.blank {
  width: 800px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #888888;
}
</style>
